import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';
// import pxToVw from 'postcss-px-to-viewport-8-plugin';
// import autoprefixer from 'autoprefixer';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const {
    VITE_APP_BASE_URL,
    VITE_APP_PORT,
    VITE_APP_REPORT,
    VITE_APP_BUILD_GZIP,
    VITE_APP_OPEN,
    VITE_APP_API_URL_PROXY,
    VITE_APP_Auto_Import,
    VITE_APP_Components,
    VITE_APP_BUILD_BR,
    VITE_APP_API_URL_PREFIX,
    VITE_APP_API_URL_PREFIX_1,
  } = env;
  const isBuild = command === 'build';
  // 插件
  const vitePlugins = [react()];

  // rollup-plugin-visualizer 生成包预览(分析依赖包大小,方便做优化处理)

  vitePlugins.push(
    visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: false,
      gzipSize: true,
      brotliSize: true,
    }),
  );

  // proxy
  const proxy = {};
  if (!isBuild) {
    // 不是生产环境
    if (VITE_APP_API_URL_PROXY && VITE_APP_API_URL_PREFIX !== '') {
      proxy[VITE_APP_API_URL_PREFIX] = {
        target: VITE_APP_API_URL_PROXY,
        rewrite: (path) =>
          path.replace(VITE_APP_API_URL_PREFIX, VITE_APP_API_URL_PREFIX),
        bypass(req, res, options) {
          const proxyURL = options.target + options.rewrite(req.url);
          res.setHeader('x-req-proxyURL', proxyURL); // 将真实请求地址设置到响应头中
        },
        changeOrigin: true,
      };
    }
  }
  return {
    root,
    base: VITE_APP_BASE_URL + '/',
    server: {
      host: '0.0.0.0',
      port: Number(VITE_APP_PORT || 3001),
      open: VITE_APP_OPEN === 'true',
      cors: true,
      proxy,
    },
    resolve: {
      alias: [
        {
          // find: /@\//,
          find: '@',
          replacement: path.resolve(__dirname, './src'),
        },
      ],
    },
    plugins: vitePlugins,
    css: {
      postcss: {
        plugins: [
          /*       pxToVw({
            unitToConvert: 'px', // 需要转换的单位，默认为'px'
            viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 1080, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: ['.no'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false, // 允许在媒体查询中转换`px`
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            landscape: true, // 是否处理横屏情况
          }), */
        ],
      },
      modules: {
        // 开启 camelCase 格式变量名转换
        localsConvention: 'camelCase',
        // 类名 前缀
        generateScopedName: '[local]-[hash:base64:5]',
      },
    },
    build: {
      minify: 'terser',
      sourcemap: true,
      copyPublicDir: false,
      rollupOptions: {
        output: {
          chunkFileNames: `js/[name]-[hash].js`,
          entryFileNames: `js/[name]-[hash].js`,
          assetFileNames(assetInfo) {
            if (assetInfo.name.endsWith('.css')) {
              return 'css/[name]-[hash].css';
            }
            const imgExts = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'];

            if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
              return 'img/[ext]/[name]-[extname]';
            }
            return 'asset/[name]-[hash]-[extname]';
          },
        },
        terserOptions: {
          compress: {
            // 生产环境时移除console
            drop_console: false,
            drop_debugger: false,
          },
        },
      },
    },
  };
});
